<template>
  <div class="docs-content-container">
    <div class="docs-content-header">
      <h3>{{ query.title }}</h3>
      <i class="el-icon-share" />
    </div>
    <div class="docs-content-main">
      <template v-if="query.content===false">
        <ul v-if="docsMenuData.length>0">
          <li v-for="(item,index) in docsMenuData" :key="item.id" style="    font-size: 14px;line-height: 27px;">
            <el-link type="primary" :href="'#/helpDocs/index?title='+item.title+'&content='+item.content+'&id='+item.id" :underline="false">({{ index+1 }})、{{ item.title }}</el-link>
          </li>
        </ul>
        <el-empty v-else description="暂无数据" />
      </template>
      <div v-else style="position: relative;">
        <div ref="print" class="docsContent-body">
          <h2>{{ docsContent.title }}</h2>
          <div class="subDesc">
            <span class="color-primary">{{ docsContent.categoryName }}</span>&nbsp;&nbsp;
            <span v-if="docsContent.attachment" class="color-danger">文档末尾有{{ docsContent.attachment.split(',').length }}个附件下载</span>&nbsp;&nbsp;
            {{ docsContent.gmtCreated | formatDate(T.DATE_TIME_FMT) }}
          </div>
          <div v-html="docsContent.content" />
          <div v-if="docsContent.attachment" style="margin-top:20px">
            <ul>
              <li v-for="(item,index) in docsContent.attachment.split(',')" :key="item" style="line-height: 25px; color: #1890FF;">
                <a :href="global.getFileView(item)" target="_blank">附件{{ index+1 }}下载</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="print">
          <i class="el-icon-printer color-primary common-cursor" @click="printing" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Print from '@/utils/print.js'
Vue.use(Print)
export default {
  data: function() {
    return {
      docsMenuData: [],
      docsContent: {},
      query: {}
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.query.title && val.query.id && (val.query.content + '')) {
          this.query = val.query
          this.fetchData()
        }
      },
      deep: true
    }
  },
  created() {
    var query = this.$route.query
    if (query.title && query.id && (query.content + '')) {
      this.query = query
      this.fetchData()
    } else {
      this.$router.push({ path: '/helpDocs/index' })
    }
  },
  methods: {
    fetchData() {
      console.log()
      if ((this.query.content + '') === 'false') {
        this.docsMenuData = []
        this.$store.dispatch('contentUnionAllCategoryByPid', this.query.id).then((res) => {
          this.docsMenuData = res
        }).catch((_) => {})
      } else {
        this.$store.dispatch('getHelpContentDetailsById', this.query.id).then(res => {
          this.docsContent = res
        }).catch((_) => {})
      }
      /* */
    },
    printing() {
      this.$print(this.$refs.print)
    }
  }
}
</script>
<style lang="scss" scoped>
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
.docsContent-body{
  padding: 0 25px;
  h2{
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
  }
  .subDesc{
    text-align: center;
    font-size: 14;
    margin: 10px auto 10px;
  }

}
.docs-content-container{
  .print{
    text-align: right;
    position: absolute;
    top: 5px;
    left: 0px;
    right: 12px;
    i{
      font-size: 20px;
    }
  }
  .docs-content-header{
    padding: 10px 20px;
    height: 50px;
    display: flex;
    border-bottom: 1px solid #F4F5F9;
    h3{
      flex: 1;
      margin: 0;
      font-size: 20px;
      font-weight: 200;
      text-align: center;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #7e888b;
    }
    i{
      line-height: 30px;
    }
  }
  .docs-content-main{
    overflow: auto;
    max-width: 980px;
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 9px 24px;
    display: block;
    line-height: 1.2;
    font-size: 15px;
    word-wrap: break-word;
    color: #525252;
  }
  .docs-content-navigation{
    max-width: 980px;
    margin-left: auto!important;
    margin-right: auto!important;
    position: relative;
    padding: 9px 24px;
    .prev{
      float: left;
      color: #999;
      padding: 2px 0;
      font-size: 14px;
    }
    .next{
      float: right;
      color: #999;
      padding: 2px 0;
      font-size: 14px;
    }
  }
}
</style>
